<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米商城</title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2955194_r746opnkf3c.css" />
		<link rel="shortcut icon" href="img/logo-mi.png" type="image/x-icon" />
		<link rel="stylesheet" href="css/swiper-bundle.min.css" />
		<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="app">
			<!-- 头部开始 -->
			<div id="head">
				<div class="head_box">
					<div class="left">
						<ul>
							<li><a href="#">小米商城</a></li>
							<li><span>|</span></li>
							<li><a href="#">MIUI</a></li>
							<li><span>|</span></li>
							<li><a href="#">IoT</a></li>
							<li><span>|</span></li>
							<li><a href="#">云服务</a></li>
							<li><span>|</span></li>
							<li><a href="#">天星数科</a></li>
							<li><span>|</span></li>
							<li><a href="#">有品</a></li>
							<li><span>|</span></li>
							<li><a href="#">小爱开放平台</a></li>
							<li><span>|</span></li>
							<li><a href="#">企业团购</a></li>
							<li><span>|</span></li>
							<li><a href="#">资质证照</a></li>
							<li><span>|</span></li>
							<li><a href="#">协议规则</a></li>
							<li><span>|</span></li>
							<li><a href="#">下载app</a></li>
							<li><span>|</span></li>
							<li><a href="#">智能生活</a></li>
							<li><span>|</span></li>
							<li><a href="#">Select Location</a></li>
						</ul>
					</div>
					<div class="right">
						<ul>
							<li><a href="#">登录</a></li>
							<li><span>|</span></li>
							<li><a href="#">注册</a></li>
							<li><span>|</span></li>
							<li><a href="#">消息通知</a></li>
							<li><a href="#"><i class="iconfont icon-gouwuche"></i>购物车</a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 头部结束 -->

			<!-- banner 与 logo 开始 -->
			<div id="banner_box">

				<!-- logo_nav开始 -->
				<div class="logo_nav">
					<div class="logo">
						<a href="index.html">小米官网</a>
					</div>
					<div class="nav">
						<ul>
							<li v-for="item in navArr"><a href="#">{{item}}</a></li>
						</ul>
					</div>
					<div class="search">
						<form action="#" method="post">
							<input type="text" placeholder="小米手机" />
							<button type="button"><i class="iconfont icon-sousuo icon_font_size"></i></button>
						</form>
					</div>
				</div>
				<!-- logo_nav结束 -->

				<!-- banner开始 -->
				<div class="banner">
					<!-- 侧边栏 -->
					<div class="sub_nav">
						<ul>
							<li>
								<a href="javascript:void(0)">手机<i class="iconfont icon-jiantou_yemian_xiangyou"></i></a>
								<div class="box">
									<div>
										<ul>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>

											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
										</ul>
										<ul>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
										</ul>
										<ul>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
										</ul>
										<ul>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="./img/phone.PNG">
													<span>小米手机</span>
												</a>
											</li>
										</ul>
									</div>
								</div>
							</li>
							<li>
								<a href="javascript:void(0)">电视<i class="iconfont icon-jiantou_yemian_xiangyou"></i></a>
								<div class="box">
									<div>
										<ul>
											<li>
												<a href="#">
													<img src="img/TV.webp">
													<span>小米智能电视</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="img/TV.webp">
													<span>小米智能电视</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="img/TV.webp">
													<span>小米智能电视</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="img/TV.webp">
													<span>小米智能电视</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="img/TV.webp">
													<span>小米智能电视</span>
												</a>
											</li>
											<li>
												<a href="#">
													<img src="img/TV.webp">
													<span>小米智能电视</span>
												</a>
											</li>
										</ul>
									</div>
								</div>
							</li>
							<li>
								<a href="javascript:void(0)">笔记本 平板<i
										class="iconfont icon-jiantou_yemian_xiangyou"></i></a>
							</li>
							<li>
								<a href="javascript:void(0)">家电<i class="iconfont icon-jiantou_yemian_xiangyou"></i></a>
							</li>
							<li>
								<a href="javascript:void(0)">出行 穿戴<i
										class="iconfont icon-jiantou_yemian_xiangyou"></i></a>
							</li>
							<li>
								<a href="javascript:void(0)">智能 路由器<i
										class="iconfont icon-jiantou_yemian_xiangyou"></i></a>
							</li>
							<li>
								<a href="javascript:void(0)">电源 配件<i
										class="iconfont icon-jiantou_yemian_xiangyou"></i></a>
							</li>
							<li>
								<a href="javascript:void(0)">健康 儿童<i
										class="iconfont icon-jiantou_yemian_xiangyou"></i></a>
							</li>
							<li>
								<a href="javascript:void(0)">耳机 音箱<i
										class="iconfont icon-jiantou_yemian_xiangyou"></i></a>
							</li>
							<li>
								<a href="javascript:void(0)">生活 箱包<i
										class="iconfont icon-jiantou_yemian_xiangyou"></i></a>
							</li>

						</ul>
					</div>
					<!-- 轮播图 -->
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="item in bannerListImg">
								<img :src="item">
							</div>
						</div>
						<!-- 如果需要分页器 -->
						<div class="swiper-pagination"></div>

						<!-- 如果需要导航按钮 -->
						<div class="swiper-button-prev"></div>
						<div class="swiper-button-next"></div>
					</div>
				</div>
				<!-- banner结束 -->

				<!-- list_box开始 -->
				<div class="list_box">
					<div class="channel_list">
						<ul>
							<li>
								<a href="javascript:void(0)"><i class="iconfont icon-time icon_font_size"></i>保障服务</a>
							</li>
							<li>
								<a href="javascript:void(0)"><i class="iconfont icon-qiye icon_font_size"></i>企业团购</a>
							</li>
							<li>
								<a href="javascript:void(0)"><i class="iconfont icon-F icon_font_size"></i> F码通道</a>
							</li>
							<li>
								<a href="javascript:void(0)"><i class="iconfont icon-sim icon_font_size"></i>米粉卡</a>
							</li>
							<li>
								<a href="javascript:void(0)"><i
										class="iconfont icon-qianbao icon_font_size"></i>以旧换新</a>
							</li>
							<li>
								<a href="javascript:void(0)"><i
										class="iconfont icon-chahuafei icon_font_size"></i>话费充值</a>
							</li>

						</ul>
					</div>
					<div class="img_list">
						<ul>
							<li v-for="item in list_boxListImg"><a href=""><img :src="item" alt=""></a></li>
						</ul>
					</div>
				</div>
				<!-- list_box结束 -->
			</div>
			<!-- banner 与 logo 结束 -->

			<!-- 开始 -->
			<div id="main">
				<goods-list :datas="props"></goods-list>
				<goods-list :datas="shoubiao"></goods-list>
			</div>
			<!-- 结束 -->

			<div id="footer">
				<div class="container">
					<div class="service">
						<ul>
							<li><a href=""><i class="iconfont icon-xiuli icon_font_size"></i> 预约维修服务</a></li>
							<li><a href=""><i class="iconfont icon-7tianwuliyoutuihuo icon_font_size"></i> 7天无理由退货</a>
							</li>
							<li><a href=""><i class="iconfont icon-15 icon_font_size"></i> 15天免费换货</a></li>
							<li><a href=""><i class="iconfont icon-liwu icon_font_size"></i> 满69包邮</a></li>
							<li><a href=""><i class="iconfont icon-wangdianchaxun icon_font_size"></i> 520余家售后网点</a>
							</li>
						</ul>
					</div>
					<div class="links">
						<dl class="link_title">
							<dt>帮助中心</dt>
							<dd><a href="">账户管理</a></dd>
							<dd><a href="">购物指南</a></dd>
							<dd><a href="">订单操作</a></dd>
						</dl>
						<dl class="link_title">
							<dt>服务支持</dt>
							<dd><a href="">售后政策</a></dd>
							<dd><a href="">自助服务</a></dd>
							<dd><a href="">相关下载</a></dd>
						</dl>
						<dl class="link_title">
							<dt>线下门店</dt>
							<dd><a href="">小米之家</a></dd>
							<dd><a href="">服务网点</a></dd>
							<dd><a href="">授权体验店/专区</a></dd>
						</dl>
						<dl class="link_title">
							<dt>关于小米</dt>
							<dd><a href="">了解小米</a></dd>
							<dd><a href="">加入小米</a></dd>
							<dd><a href="">投资者关系</a></dd>
							<dd><a href="">企业社会责任</a></dd>
							<dd><a href="">廉洁举报</a></dd>
						</dl>
						<dl class="link_title">
							<dt>关注我们</dt>
							<dd><a href="">新浪微博</a></dd>
							<dd><a href="">官方微信</a></dd>
							<dd><a href="">联系我们</a></dd>
							<dd><a href="">公益基金会</a></dd>
						</dl>
						<dl class="link_title">
							<dt>特色服务</dt>
							<dd><a href="">F码通道</a></dd>
							<dd><a href="">礼物码</a></dd>
							<dd><a href="">防伪查询</a></dd>
						</dl>

						<div class="contact">
							<p class="phone">400-100-5678</p>
							<p>8:00-18:00(仅收市话费)</p>

							<div class="button">
								<a href=""><i class="iconfont icon-xinxi icon_font_size"></i>人工客服</a>
							</div>

							<div class="follow">
								<p>关注小米:<i class="iconfont icon-xinlangweibo icon_font_size"></i>
									<i class="iconfont icon-weixin icon_font_size"></i>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 组件 代码复用 -->
		<template id="goodsList_template">
			<div class="container">
				<div class="ad_img" v-if="datas.adImgBool">
					<a href="#"><img :src="datas.adImg"></a>
				</div>
				<div class="home_box">
					<h2 class="title">{{datas.title}}</h2>
					<div class="goods">
						<div class="goods_left" v-for="item in datas.goodsLeft">
							<a href=""><img :src="item"></a>
						</div>
						<div class="goods_right">
							<div class="item">
								<a href="#" v-for="item in datas.goodsRight">
									<div class="item_img">
										<img :src="item.img">
									</div>
									<h3 class="title1">{{item.mainTitle}}</h3>
									<p class="title2">{{item.subTitle}}</p>
									<p class="title3">{{item.prices}}</p>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</template>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				// 轮播图图片数据
				navArr: ["小米手机", "Redimi 红米", "电视", "笔记本", "平板", "家电", "路由器", "服务", "社区"],
				bannerListImg: [],
				list_boxListImg: [],
				props: {
					id: 0,
					adImg: "img/ad1.webp",
					adImgBool: true,
					title: "手机",
					goodsLeft: [
						"img/good1.webp",
					],
					goodsRight: [{
							id: 1,
							img: "img/item01.webp",
							mainTitle: "Redmi Note 11 Pro系列",
							subTitle: "Redmi Note 11 Pro系列",
							prices: "1799元起",
						},
						{
							id: 2,
							img: "img/item02.webp",
							mainTitle: "Redmi Note 11 5G ",
							subTitle: "5000mAh大电量",
							prices: "1199元起",
						},
						{
							id: 3,
							img: "img/item01.webp",
							mainTitle: "Redmi Note 11 Pro系列",
							subTitle: "Redmi Note 11 Pro系列",
							prices: "1799元起",
						},
						{
							id: 4,
							img: "img/item02.webp",
							mainTitle: "Redmi Note 11 5G ",
							subTitle: "5000mAh大电量",
							prices: "1199元起",
						},
						{
							id: 5,
							img: "img/item01.webp",
							mainTitle: "Redmi Note 11 Pro系列",
							subTitle: "Redmi Note 11 Pro系列",
							prices: "1799元起",
						},
						{
							id: 6,
							img: "img/item02.webp",
							mainTitle: "Redmi Note 11 5G ",
							subTitle: "5000mAh大电量",
							prices: "1199元起",
						},
						{
							id: 7,
							img: "img/item01.webp",
							mainTitle: "Redmi Note 11 Pro系列",
							subTitle: "Redmi Note 11 Pro系列",
							prices: "1799元起",
						},
						{
							id: 8,
							img: "img/item02.webp",
							mainTitle: "Redmi Note 11 5G ",
							subTitle: "5000mAh大电量",
							prices: "1199元起",
						},
					],

				},
				shoubiao: {
					id: 0,
					adImg: "img/ad2.webp",
					adImgBool: false,
					title: "智能穿戴",
					goodsLeft: [
						"img/good2.webp",
					],
					goodsRight: [{
							id: 1,
							img: "img/item03.webp",
							mainTitle: "Redmi 手表2",
							subTitle: "AMOLED高清大屏",
							prices: "399元起",
						},
						{
							id: 2,
							img: "img/item03.webp",
							mainTitle: "Redmi 手表2",
							subTitle: "AMOLED高清大屏",
							prices: "399元起",
						},
						{
							id: 3,
							img: "img/item03.webp",
							mainTitle: "Redmi 手表2",
							subTitle: "AMOLED高清大屏",
							prices: "399元起",
						},
						{
							id: 4,
							img: "img/item03.webp",
							mainTitle: "Redmi 手表2",
							subTitle: "AMOLED高清大屏",
							prices: "399元起",
						},
						{
							id: 5,
							img: "img/item03.webp",
							mainTitle: "Redmi 手表2",
							subTitle: "AMOLED高清大屏",
							prices: "399元起",
						},
						{
							id: 6,
							img: "img/item03.webp",
							mainTitle: "Redmi 手表2",
							subTitle: "AMOLED高清大屏",
							prices: "399元起",
						},
						{
							id: 7,
							img: "img/item03.webp",
							mainTitle: "Redmi 手表2",
							subTitle: "AMOLED高清大屏",
							prices: "399元起",
						},
						{
							id: 8,
							img: "img/item03.webp",
							mainTitle: "Redmi 手表2",
							subTitle: "AMOLED高清大屏",
							prices: "399元起",
						},
					],
				}

			},
			components: {
				"goodsList": {
					template: "#goodsList_template",
					props: ["datas"],
				}
			},
			created: function() {
				var arr = [
					"img/1.webp",
					"img/2.webp",
					"img/3.jpeg"
				]

				this.bannerListImg = arr;

				var boxlist = [
					"img/img01.jpg",
					"img/img02.jpg",
					"img/img03.jpeg"
				]
				this.list_boxListImg = boxlist;
			}
		});
		var mySwiper = new Swiper('.swiper-container', {
			//direction: 'vertical', // 垂直切换选项
			effect: 'fade',
			autoplay: true,
			autoplay: {
				delay: 3000,
				stopOnLastSlide: false,
				disableOnInteraction: true,
			},
			loop: true, // 循环模式选项

			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},

			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},

		});
	</script>
</html>
